import { useEffect, useState } from "react"
import { ArticleModelState, LikeModelState, useDispatch, useSelector } from "umi";
import styles from './index.less'
import { Badge } from 'antd';
import { share } from "@/share";
import { ShareAltOutlined, CommentOutlined, HeartOutlined } from '@ant-design/icons';
import { IShareItem } from "@/types";
interface Ipros {
    data: data
}
interface data {
    id: string,
    path: string
}
export default function Likes(props: Ipros) {
    const { articleDetail } = useSelector((state: { article: ArticleModelState }) => state.article);
    let like: LikeModelState = useSelector(
        (state: { likes: LikeModelState }) => state.likes,
    );
    const [flag, setFlag] = useState(false);
    const dispatch = useDispatch()
    const path=props.data.path.split('/')
    function shareArticle() {
        share(articleDetail as IShareItem)
    }
    return <div className={styles.dians}>
            <div className={flag ? styles.like : styles.dislike}>
            <Badge className={styles.quantity} color={'red'} count={like.data.likes}>
                    <HeartOutlined onClick={() => {
                        setFlag(!flag)
                        dispatch({
                            type: 'likes/getArticleLikes',
                            payload: {
                                id: props.data.id,
                                path:path[1],
                                type: { type: flag ? 'dislike' : 'like' },
                            }
                        })
                    }} />
              </Badge>
            </div>
        
        <div>
            <CommentOutlined />
        </div>
        <div onClick={shareArticle}>
           <ShareAltOutlined />
        </div>
    </div>

}



